<!--
 * @Author: TT-hzy
 * @Date: 2024-07-30 15:16:04
 * @LastEditors: TT-hzy
 * @LastEditTime: 2024-08-01 16:22:41
-->

<script lang="ts" setup>
const items = [
  {
    image: 'https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/logo-0921b993.svg',
    name: '汽水音乐',
    url: '',
    type: 1
  },
  {
    image: '',
    name: '用户协议',
    url: '',
    type: 0
  },
  {
    image: '',
    name: '隐私政策',
    url: '',
    type: 0
  },
  {
    image: '',
    name: '',
    url: '',
    type: 0
  }
]

function tapItem(e: any) {
  alert(e.name)
}
</script>
<template>
  <nav class="header-container">
    <div @click="tapItem(info)" v-for="(info, index) in items" :key="index">
      <img class="logo" :src="info.image" alt="{{info.name}}" v-if="info.type == 1" />
      <a class="ml-40 title" v-else> {{ info.name }}</a>
    </div>

    <a class="publish column-center">发布视频</a>
  </nav>
</template>

<style lang="less" scoped>
.header-container {
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;

  .logo {
    height: 30px;
    margin-right: 100px;
  }
  .title {
    line-height: 22px;
    color: #fff;
  }
  .publish {
    position: absolute;
    top: 14px;
    right: 40px;
    width: 90px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.85);
  }
}
</style>
